document.addEventListener('keydown',event =>{
	var boxs = document.getElementsByClassName('anjian');
	var q = 'KeyQ';
	var w = 'KeyW';
	var e = 'KeyE';
	var r = 'KeyR';
	var t = 'KeyT';
	var y = 'KeyY';
	var u = 'KeyU';
	var i = 'KeyI';
	var o = 'KeyO';
	var p = 'KeyP';
	var a = 'KeyA';
	var s = 'KeyS';
	var d = 'KeyD';
	var f = 'KeyF';
	var g = 'KeyG';
	var h = 'KeyH';
	var j = 'KeyJ';
	var k = 'KeyK';
	var l = 'KeyL';
	var z = 'KeyZ';
	var x = 'KeyX';
	var c = 'KeyC';
	var v = 'KeyV';
	var b = 'KeyB';
	var n = 'KeyN';
	var m = 'KeyM';
	switch(event.code){
		case q:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[0].classList.add('anjian2');
		}					
		break;
		case w:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[1].classList.add('anjian2');
		}					
		break;
		case e:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[2].classList.add('anjian2');
		}					
		break;
		case r:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[3].classList.add('anjian2');
		}					
		break;
		case t:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[4].classList.add('anjian2');
		}					
		break;
		case y:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[5].classList.add('anjian2');
		}					
		break;
		case u:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[6].classList.add('anjian2');
		}					
		break;
		case i:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[7].classList.add('anjian2');
		}					
		break;
		case o:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[8].classList.add('anjian2');
		}					
		break;
		case p:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[9].classList.add('anjian2');
		}					
		break;
		case a:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[10].classList.add('anjian2');
		}					
		break;
		case s:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[11].classList.add('anjian2');
		}					
		break;
		case d:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[12].classList.add('anjian2');
		}					
		break;
		case f:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[13].classList.add('anjian2');
		}					
		break;
		case g:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[14].classList.add('anjian2');
		}					
		break;
		case h:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[15].classList.add('anjian2');
		}					
		break;
		case j:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[16].classList.add('anjian2');
		}					
		break;
		case k:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[17].classList.add('anjian2');
		}					
		break;
		case l:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[18].classList.add('anjian2');
		}					
		break;
		case z:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[19].classList.add('anjian2');
		}					
		break;
		case x:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[20].classList.add('anjian2');
		}					
		break;
		case c:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[21].classList.add('anjian2');
		}					
		break;
		case v:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[22].classList.add('anjian2');
		}					
		break;
		case b:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[23].classList.add('anjian2');
		}					
		break;
		case n:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[24].classList.add('anjian2');
		}					
		break;
		case m:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[25].classList.add('anjian2');
		}					
		break;
	}
});
document.addEventListener('keyup',event =>{
	var boxs = document.getElementsByClassName('anjian');
	var q = 'KeyQ';
	var w = 'KeyW';
	var e = 'KeyE';
	var r = 'KeyR';
	var t = 'KeyT';
	var y = 'KeyY';
	var u = 'KeyU';
	var i = 'KeyI';
	var o = 'KeyO';
	var p = 'KeyP';
	var a = 'KeyA';
	var s = 'KeyS';
	var d = 'KeyD';
	var f = 'KeyF';
	var g = 'KeyG';
	var h = 'KeyH';
	var j = 'KeyJ';
	var k = 'KeyK';
	var l = 'KeyL';
	var z = 'KeyZ';
	var x = 'KeyX';
	var c = 'KeyC';
	var v = 'KeyV';
	var b = 'KeyB';
	var n = 'KeyN';
	var m = 'KeyM';
	switch(event.code){
		case q:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[0].classList.remove('anjian2');
		}					
		break;
		case w:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[1].classList.remove('anjian2');
		}					
		break;
		case e:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[2].classList.remove('anjian2');
		}					
		break;
		case r:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[3].classList.remove('anjian2');
		}					
		break;
		case t:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[4].classList.remove('anjian2');
		}					
		break;
		case y:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[5].classList.remove('anjian2');
		}					
		break;
		case u:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[6].classList.remove('anjian2');
		}					
		break;
		case i:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[7].classList.remove('anjian2');
		}					
		break;
		case o:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[8].classList.remove('anjian2');
		}					
		break;
		case p:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[9].classList.remove('anjian2');
		}					
		break;
		case a:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[10].classList.remove('anjian2');
		}					
		break;
		case s:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[11].classList.remove('anjian2');
		}					
		break;
		case d:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[12].classList.remove('anjian2');
		}					
		break;
		case f:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[13].classList.remove('anjian2');
		}					
		break;
		case g:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[14].classList.remove('anjian2');
		}					
		break;
		case h:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[15].classList.remove('anjian2');
		}					
		break;
		case j:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[16].classList.remove('anjian2');
		}					
		break;
		case k:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[17].classList.remove('anjian2');
		}					
		break;
		case l:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[18].classList.remove('anjian2');
		}					
		break;
		case z:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[19].classList.remove('anjian2');
		}					
		break;
		case x:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[20].classList.remove('anjian2');
		}					
		break;
		case c:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[21].classList.remove('anjian2');
		}					
		break;
		case v:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[22].classList.remove('anjian2');
		}					
		break;
		case b:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[23].classList.remove('anjian2');
		}					
		break;
		case n:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[24].classList.remove('anjian2');
		}					
		break;
		case m:
		var isShow=true;
		for(var i=0;i<boxs.length;i++){
			boxs[25].classList.remove('anjian2');
		}					
		break;
	}
});